<!-- 日期范围选择器组件 -->
<template>
	<view class="main" >
		<view class="pick-box" @click="open(0)">{{startDate.des}}</view>
		<!-- <u-line style="width: 60rpx;display: inline-block;margin: 0 20rpx;"></u-line> -->
		<view style="padding: 10rpx 0;color: #f2f2f2;">————</view>
		<view class="pick-box" @click="open(1)">{{endDate.des}}</view>
		<u-datetime-picker  :show="show" @confirm="confirm" v-model="value1" @cancel="show = false" mode="date"></u-datetime-picker>
	</view>
</template>

<script>
	import mixin from '@/utils/mixins.js'
	export default{
		data(){
			return {
				startDate:{
					des:'开始日期',
					val:0
				},
				endDate:{
					des:'结束日期',
					val:0
				},
				show:false,
				value1:new Date().getTime(),
				current:0
			}
		},
		props:{
			value:{
				type:Array,
				default:()=>{return []}
			}
		},
		mixins:[mixin],
		methods:{
			/**
			 * 传递一个时间戳数组, 显示开始和结束时间
			 * $ref调用子组件用到
			 * @param {Array} dateArr 时间戳数组[...,...]
			 */
			dateReturnShow(dateArr){
				console.log('进入子组件方法',dateArr)
				// 如果开始时间存在的情况
				if(dateArr[0] && dateArr[0] !== 0){
					this.startDate.des = this.getDate(dateArr[0])
					this.startDate.val = dateArr[0]
				}
				if(dateArr[1] && dateArr[1] !== 0){
					this.endDate.des = this.getDate(dateArr[1])
					this.endDate.val = dateArr[1]
				}
			},
			open(index){
				this.show = true;
				this.current = index;
			},
			confirm(et){
				console.log(et);
				if(this.current === 0){
					console.log(et.value , this.endDate, et.value < this.endDate)
					
					if(this.endDate.val != 0 && (et.value > this.endDate.val)){
						uni.showToast({
							title:'结束时间不能小于开始时间',
							icon:'none'
						})
						return 
					}
					this.startDate.val = et.value;
					
					this.startDate.des = this.getDate(et.value);
				}else{
					
					if(this.startDate.val != 0 && (et.value < this.startDate.val)){
						uni.showToast({
							title:'结束时间不能小于开始时间',
							icon:'none'
						})
						return
					}
					this.endDate.val = et.value;
					this.endDate.des = this.getDate(et.value);
					
				}
				
				this.$emit('input', [this.startDate.val, this.endDate.val])
				
				this.show = false;
			}
		}
	}
</script>

<style lang="scss">
	.main{
		padding: 20rpx;
		text-align: center;
		white-space: nowrap;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.pick-box{
			padding: 10rpx 30rpx;
			color: #A0A9B7;
			background-color: #F5F7FA ;
			vertical-align: middle;
			display: inline-block;
			width: 30%;
			min-width: 100px;
			overflow: hidden;
			overflow-x: auto;
		}
	}
</style>